<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3、虚拟DOM和真实DOM</title>
</head>
<body>
    <!-- 准备容器 -->
    <div id="test"></div>
    <div id="zxc"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作DOM -->
    <script type="text/javascript" src="../../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../../js/babel.min.js"></script>

    <!-- 使用JSX语法 -->
    <script type="text/babel">
        //1、创建虚拟DOM
        const VDOM = <h1>
            <span id="zxc">Hello,React</span>
            </h1>
        //2、渲染虚拟DOM到页面
        ReactDOM.render(
            VDOM,
            document.getElementById('test')
        );

        const TDOM = document.getElementById('zxc');
        console.log('虚拟DOM',VDOM);
        console.log('真实DOM',TDOM);
        //debugger;
        /*
           关于虚拟DOM
           1、本质是Objext类型的对象（一般对象）
           2、虚拟DOM比较‘轻’，真实DOM比较‘重’，因为虚拟DOM是React内部在
           用，无需真实DOM上那么多属性。
           3、虚拟DOM最终会被转化为真实DOM，呈现在页面上。
        */
    </script>
</body>
</html>